<template>
  <div class="table_dimensional_List">
    <div class="content">
      <div class="li add" @click="handleChange('add',null)">
        <icon-plus/>
        <p>新建三维</p>
      </div>
    </div>
    <div class="bottom">
      <a-pagination :total="50" show-total show-jumper show-page-size/>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {useRouter} from "vue-router";

const router = useRouter();
const handleChange = (type: string, data: any) => {
  switch (type){
    case 'add':
      router.push('/threeD/edit');
      break;
  }
}
</script>
<style lang="less" scoped>
.table_dimensional_List {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .content {
    width: 100%;
    height: calc(100% - 80px);
    display: flex;
    overflow-y: auto;
    overflow-x: hidden;

    > .li {
      display: flex;
      position: relative;
      width: 258px;
      height: 184px;
      margin: 16px;
      border: 1px solid #3a4659;
      overflow: hidden;
      flex-direction: column;

      &.add {
        height: 184px;
        width: 258px;
        border: 1px solid #00baff;
        font-size: 14px;
        color: #8eeeff;
        background-image: -webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 222, 255, .39)), to(rgba(0, 174, 255, .19)));
        background-image: linear-gradient(-90deg, rgba(0, 222, 255, .39), rgba(0, 174, 255, .19));
        -webkit-box-shadow: 0 0 10px 0 rgb(55 224 255 / 30%);
        box-shadow: 0 0 10px 0 rgb(55 224 255 / 30%);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
    }
  }

  .bottom {
    width: calc(100% - 40px);
    height: 80px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }
}
</style>
